import '../lib/jquery.js';
import { ajax } from '../utils/ajax.js';

const listBox = $('.list');  // 商品列表
const categoryBox = $('.category');  // 分类
const filterBox = $('.filterBox').first();  // 热销/折扣
const saleBox = $('.saleBox');  // 打几折
const sortBox = $('.sortBox');  // 排序
const searchBox = $('.search');  // 查询

// 首页末页，上一页下一页
const firstBtn = $('.first');
const prevBtn = $('.prev');
const nextBtn = $('.next');
const lastBtn = $('.last');

const totalBox = $('.total');  // 当前页 / 总页数
const pagesizeBox = $('.pagesize');  // 一页多少条数据
const jumpBox = $('.jump');  // 跳转的输入框
const jumpBtn = $('.go');  // 跳转按钮

let totalPage;  // 总页数

// 请求发送的数据
let data = {
    current: 1,  // 当前页
    pagesize: 12,  // 一页多少条数据显示
    search: '',  // 模糊搜索关键字
    filter: '',  // hot, sale, '' 表示全部 (热销/折扣)筛选
    saleType: 10,  // 折扣类型 5~10
    sortType: 'id',  // id || sale || price排序类型
    sortMethod: 'ASC',  // ASC 正序, DESC 倒序
    category: '',  // 分类 空字符串表示全部
};

// 渲染分类列表
async function renderCategory() {
    try {
        const { data: { code, list } } = await ajax.get('/goods/category');
        if (code !== 1) throw new Error('获取分类列表失败');

        categoryBox.empty();
        let str = `<li class="active">全部</li>`;
        list.forEach(e => str += `<li>${e}</li>`);
        categoryBox.html(str);
    } catch (error) {
        console.error(error);
    }
}
renderCategory();

// 渲染商品列表
async function renderList() {
    try {
        const { data: { code, list, total } } = await ajax.get('/goods/list', { params: data });
        if (code !== 1) throw new Error('获取商品列表失败');

        let str = list.length > 0 ? list.map(e => `
            <li data-id="${e.goods_id}">
                <div class="show">
                    <img src="${e.img_big_logo}">
                    ${e.is_hot ? '<span class="hot">热销</span>' : ''}
                    ${e.is_sale ? '<span>折扣</span>' : ''}
                </div>
                <div class="info">
                    <p class="title">${e.title}</p>
                    <p class="price">
                        <span class="curr">¥ ${e.current_price}</span>
                        <span class="old">¥ ${e.price}</span>
                    </p>        
                </div>
            </li>`).join('') : '<img src="../img/no.png" alt="">';

        listBox.html(str);

        totalPage = total;
        totalBox.text(`${data.current} / ${totalPage}`);
        jumpBox.val(`${data.current}`);

        updatePaginationButtons();
    } catch (error) {
        console.error(error);
    }
}
renderList();

// 更新分页按钮状态
function updatePaginationButtons() {
    prevBtn.toggleClass('disable', data.current <= 1);
    nextBtn.toggleClass('disable', data.current >= totalPage);
    firstBtn.toggleClass('disable', data.current <= 1);
    lastBtn.toggleClass('disable', data.current >= totalPage);
}

// 分类选择事件处理
categoryBox.on('click', ({ target }) => {
    if (target.nodeName === 'LI') {
        categoryBox.children().removeClass('active');
        target.classList.add('active');

        const selectedCategory = target.innerText === '全部' ? '' : target.innerText;
        data.category = selectedCategory;

        renderList();
    }
});

// 首页、末页、上一页、下一页事件处理
firstBtn.on('click', () => { data.current = 1; renderList(); });
lastBtn.on('click', () => { data.current = totalPage; renderList(); });
prevBtn.on('click', () => { if (data.current > 1) data.current--; renderList(); });
nextBtn.on('click', () => { if (data.current < totalPage) data.current++; renderList(); });

// 跳转事件处理
jumpBtn.on('click', () => {
    const targetPage = parseInt(jumpBox.val(), 10);
    if (targetPage < 1 || targetPage > totalPage) return alert('跳转页不合法');

    data.current = targetPage;
    renderList();
});

// 每页显示条数事件处理
pagesizeBox.on('change', () => {
    data.pagesize = parseInt(pagesizeBox.val(), 10);
    data.current = 1; 
    renderList();
});

// 热销/折扣事件处理
filterBox.on('click', ({ target }) => {
    if (target.nodeName === 'LI') {
        filterBox.children().removeClass('active');
        target.classList.add('active');

        data.filter = target.dataset.type;
        data.current = 1;

        renderList();
    }
});

// 几折事件处理
saleBox.on('click', ({ target }) => {
    if (target.nodeName === 'LI') {
        saleBox.children().removeClass('active');
        target.classList.add('active');

        data.saleType = parseInt(target.dataset.type, 10);
        data.current = 1;

        renderList();
    }
});

// 排序事件处理
sortBox.on('click', ({ target }) => {
    if (target.nodeName === 'LI') {
        sortBox.children().removeClass('active');
        target.classList.add('active');

        data.sortType = target.dataset.type;
        data.sortMethod = target.dataset.method;

        data.current = 1;

        renderList();
    }
});

// 搜索事件处理
searchBox.on('input', () => {
    data.search = searchBox.val();
    data.current = 1;

    renderList();
});

// 商品详情跳转事件处理
listBox.on('click', ({ target }) => {
    if (target.nodeName === 'LI') {
        const id = target.dataset.id;

        sessionStorage.setItem('id', id);

        location.href = './detail.html';
    }
});
